<template>
    <div class="modal-iframe">
        <a-modal v-model:open="open" :width="modalWidth" :title="props.title" @ok="handleOk"
            :body-style="modalBodyStyle" :mask-closable="false">
            <template #footer>
                <a-button key="submit" type="primary" @click="handleOk">关闭</a-button>
            </template>

            <div style="display: flex;justify-content:center;align-items: center;height: 100rem;" v-show="isLoading">
                <a-spin size="large" :spinning="isLoading"></a-spin>
            </div>
            <div v-html="apiData" v-show="!isLoading"></div>
        </a-modal>
    </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { ref, watch, onMounted } from 'vue';
import { getCommonSetEditor } from "@/api/web";   //引入api
const props = defineProps(['type', 'title']);  // 接收父组件传参

// 弹窗自定义样式
const modalBodyStyle = ref({ height: '70vh', 'max-height': '70vh', 'min-height': '200rem', 'overflow-y': 'auto', 'margin-top': '24rem' });
const modalWidth = ref('');   //弹窗宽度（根据浏览器宽度类型确定）

const isLoading = ref(true);    // 控制loading
const open = defineModel('isOpen');  // 弹窗显示状态（是否打开弹窗）

// 关闭弹窗
const handleOk = () => {
    open.value = false;
};

const apiData = ref({}); // 接口获取到的数据
// 获取数据
const getData = () => {
    if (props.type !== '') {
        open.value = true;
        isLoading.value = true;
        const searchData = ref({ type: props.type });
        //根据需求可以通过data传入参数
        getCommonSetEditor(searchData.value).then((res) => {
            isLoading.value = false;
            if (res === false) return;

            apiData.value = res.data;
        }).catch((rej) => {
            isLoading.value = false;
            message.error('错误：' + rej);
        });
    }
}

// 引入获取宽度，宽度类型方法
import { useWindowsWidth } from '@/store/windowsWidth.js';
const { windowsWidthType, windowsWidth } = useWindowsWidth();
const windowsWidthTypeRef = ref('pc');
const getModalWidth = () => {
    if (windowsWidthTypeRef.value === 'pc') {
        modalWidth.value = '70%';
    } else {
        modalWidth.value = '';
    }
}
// 当浏览器宽度类型值改变时触发
watch([windowsWidthType], async ([newwindowsWidthType], [oldwindowsWidthType]) => {
    if (newwindowsWidthType != oldwindowsWidthType) {
        windowsWidthTypeRef.value = newwindowsWidthType;
        getModalWidth();
    }
});

onMounted(() => {
    windowsWidthTypeRef.value = windowsWidthType.value;
    getModalWidth();
    getData();
});

</script>

<style lang="less">
// PC端弹窗样式
.ant-modal {

    img,
    video {
        max-width: 100% !important;
        max-height: 300rem !important;
    }

    .ant-modal-header {
        height: 24rem;
        line-height: 24rem;

        .ant-modal-title {
            font-size: 16rem;
        }
    }

    .ant-modal-content {
        border-radius: 8rem;
        padding: 20rem 24rem;
    }

    .ant-modal-close {
        top: 17rem;
        inset-inline-end: 17rem;
        border-radius: 4rem;
        width: 22rem;
        height: 22rem;

        .ant-modal-close-x {
            font-size: 16rem;
            line-height: 22rem;
        }
    }

    .ant-modal-footer {
        margin-top: 12rem;

        .ant-btn {
            font-size: 14rem;
            height: 32rem;
            padding: 4rem 15rem;
            border-radius: 6rem;
            box-shadow: 0 2rem 0 rgba(5, 145, 255, 0.1);
        }
    }
}
</style>